import { getPrompts } from "@/api/base";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import type { PromptsVO } from "@/api/base/types";

const icons = [
  "🔍",
  "📜",
  "✍️",
  "🧠",
  "✅",
  "🔗",
  "🔎",
  "🖼️",
  "📊",
  "🏷️",
  "✏️",
];

export default function Home() {
  const navigate = useNavigate();
  const [modules, setModules] = useState<PromptsVO[]>([]);

  const getData = async () => {
    const { rows = [] } = await getPrompts();

    const titleMap = {
      智拟文书: "文书生成",
      AI写作: "辅助写作",
      法规智搜: "法规查询",
      智能分析: "案情解析",
      案由精灵: "以案搜法",
      智能阅卷: "辅助纠错",
    } as const;
    type TitleKey = keyof typeof titleMap;

    const newArr = rows
      .filter((item) => (item.title as TitleKey) in titleMap)
      .map((item) => ({
        ...item,
        title: titleMap[item.title as TitleKey],
      }));

    setModules(newArr);
  };

  // 初始化
  useEffect(() => {
    getData();
  }, []);

  const handleChat = (module: PromptsVO) => {
    console.log("跳转聊天页面", module);
    navigate(`/chat/${module.id}`);
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 py-8 md:px-6 md:py-12">
        {/* 头部 */}
        <header className="text-center mb-15">
          <h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-2">
            AI智能司法系统
          </h1>
          <p className="text-sm md:text-base text-gray-600">
            人工智能赋能司法现代化 · 科技驱动法治新未来
          </p>
        </header>

        {/* 功能模块网格 */}
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-12">
          {modules.map((module, index) => (
            <div
              key={index}
              className="bg-white rounded-lg border border-gray-200 p-5 cursor-pointer hover:border-blue-400 hover:shadow-md transition-all"
              onClick={() => handleChat(module)}
            >
              <div className="text-4xl mb-3 text-center">{icons[index]}</div>
              <h3 className="text-base font-semibold mb-2 text-center text-gray-900">
                {module.title}
              </h3>
              <p className="text-xs text-gray-600 text-center leading-relaxed">
                {module.remark}
              </p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
